<template>
    <div>
        <el-card>
            <el-descriptions class="margin-top" title="简介" :column="2" border>
                <!-- <template slot="extra">
                    <el-button type="primary" v-if="$route.params.id == $store.state.id" size="small">操作</el-button>
                </template> -->
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-picture-outline"></i>
                        头像
                    </template>
                    <img class="img" :src="avatar" alt="" />
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        账户名
                    </template>
                    {{ username }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-custom"></i>
                        昵称
                    </template>
                    {{ nickName }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-male"></i>
                        <i class="el-icon-female"></i>
                        性别
                    </template>
                    <el-tag size="small">{{ sex }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-message"></i>
                        邮箱Email
                    </template>
                    {{ email }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        手机号码
                    </template>
                    {{ phone }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-basketball"></i>
                        部门名称
                    </template>
                    {{ departmentName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-magic-stick"></i>
                        真实姓名
                    </template>
                    {{ realName }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
    </div>
</template>

<script>
import userApi from "@/api/user.js";
export default {

    data() {
        return {
            avatar: String,
            departmentName: String,
            email: String,
            phone: String,
            realName: String,
            nickName: String,
            sex: String,
            username: String,
        };
    },
    mounted() {
        this.load();
    },
    methods: {
        load() {
            userApi.selfInfo({})
                .then((res) => {
                    this.avatar = res.data.avatar;
                    this.departmentName = res.data.departmentName;
                    this.email = res.data.email;
                    this.phone = res.data.phone;
                    this.nickName = res.data.nickName;
                    this.realName = res.data.realName;
                    this.sex = res.data.sex == 1 ? "男" : "女";
                    this.username = res.data.username;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>

<style scoped>
.img {
    width: 80px;
    height: 80px;
}
</style>
